<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { Button } from 'ant-design-vue'
import Sider from './layout/Sider.vue'

const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
}

const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  height: 'calc(100vh - 64px)',
  lineHeight: '120px',
  color: '#fff',
  // backgroundColor: '#108ee9',
};

const siderStyle = {
  textAlign: 'center',
  lineHeight: '120px',
  height: 'calc(100vh - 64px)',
  color: '#fff',
  backgroundColor: '#3ba0e9',
}
</script>

<template>
  <a-config-provider :locale="zhCN">
    <a-layout>
      <a-layout-header :style="headerStyle">Header</a-layout-header>
      <a-layout>
        <a-layout-sider :style="siderStyle">
          <Sider />
        </a-layout-sider>
        <a-layout-content :style="contentStyle">
          <RouterView />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<style scoped>
</style>
